<template>
  <el-table-column
    :prop="prop"
    :label="label"
    :align="align"
    :min-width="minWidth"
    :sortable="sortable"
  >
    <template slot="header" slot-scope="{}">
      <span>{{$t('table.货值（元）')}}</span>
      <el-tooltip class="item" effect="dark" placement="top">
        <template #content>{{$t('table.单个商品的货物申报价值')}}</template>
        <i class="el-icon-question" style="color:#409eff; margin-left:5px;"></i>
      </el-tooltip>
    </template>
    <template v-slot="{row}">
      <template v-if="row.editGoodsValueStatus">
        <el-input
          ref="goodsValueInput"
          :id="goodsForm.id + 'goodsValue'"
          v-model="goodsForm.goodsValue"
          @blur="row.editGoodsValueStatus = 0;submitGoodsValue(row)"
          @input="limitInput($event)"
          maxlength="8"
        ></el-input>
      </template>
      <template v-else>
        <template v-if="row.goodsValue || type === 'shipment'">
          {{row.goodsValue}}
          <i class="el-icon-edit mgl10" style="cursor: pointer" @click="editGoodsValue(row)" v-if="canEdit"></i>
        </template>
        <template v-else>
          <el-button type="text" @click="editGoodsValue(row)">编辑货值</el-button>
          <i class="el-icon-edit mgl10" style="cursor: pointer" @click="editGoodsValue(row)" v-if="canEdit"></i>
        </template>
      </template>
    </template>
  </el-table-column>
</template>
<script>
import i18n from "@/lang";
import {saveSuitGoodsValue} from "@/api/stock";
import {updateShipmentGoodsValue} from "@/api/shipment";

export default {
  name: "GoodsValueColumn",
  data(){
    return {
      goodsForm: {
        id: 0,
        goodsValue: 0,
      },
    }
  },
  props:{
    prop: {
      type: String,
      default: 'goodsValue',
    },
    label: {
      type: String,
      default: i18n.t('table.货值（元）'),
    },
    align: {
      type: String,
      default: 'center',
    },
    minWidth: {
      type: String,
      default: '140',
    },
    id: {
      type: String,
      default: 'id',
    },
    // 类型 商品还是货件
    type: {
      type: String,
      default: 'goods',
    },
    // 是否能编辑
    canEdit: {
      type: Boolean,
      default: true,
    },
    // 对应的货件id
    shipmentId: {
      type: Number,
      default: 0,
    },
    showMessage: {
      type: Boolean,
      default: false,
    },
    sortable: {
      type: [Boolean,String],
      default: false,
    }
  },
  methods: {
    // 编辑货值
    editGoodsValue(row){
      if(!this.canEdit){
        return;
      }
      this.goodsForm.id = row[this.id]
      this.goodsForm.goodsValue = row.goodsValue
      row.editGoodsValueStatus = 1
      this.$nextTick(()=>{
        document.getElementById(row[this.id] + 'goodsValue').focus()
      })
    },
    // 提交修改货值
    submitGoodsValue(row){
      if(!this.goodsForm.goodsValue){
        return
      }
      this.goodsForm.goodsValue = Number(this.goodsForm.goodsValue)
      if(!this.goodsForm.goodsValue){
        return;
      }
      if(this.goodsForm.goodsValue === row.goodsValue){
        return;
      }
      row.goodsValue = this.goodsForm.goodsValue
      // 提交表单 不刷新页面
      let func = saveSuitGoodsValue
      if(this.type === 'shipment'){
        func = updateShipmentGoodsValue
      }
      const data = {
        id: this.goodsForm.id,
        goodsValue: this.goodsForm.goodsValue,
        shipmentId: this.shipmentId,
      }
      func(data)
        .then(res=>{
          if(this.showMessage){
            this.$successMessage(res.message)
          }
          this.$emit('successGoodsValue',data)
        })

    },
    //限制只能输入两位小数
    limitInput(value) {
      this.goodsForm.goodsValue = ('' + value) // 第一步：转成字符串
        .replace(/[^\d^.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
        .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
        .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，	而且小数点后面只能有0到2位小数
    },
  }
}
</script>

<style scoped lang="scss">

</style>
